<script setup>
import { defineAsyncComponent, ref } from 'vue';

const props = defineProps(['avatarSrc', 'studentName', 'studentMajor', 'studentClass', 'studentId'])

// Sub Modal
const PersonalProfile = defineAsyncComponent(() => import('./PersonalProfile.vue'))

const isOpenModal = ref(false)

function openModal() {
    isOpenModal.value = true;
}
function closeModal() {
    isOpenModal.value = false
}

</script>
<template>
   <div class="student-card" >
    <img :src="props.avatarSrc" />
    <div class="message" >
        <p style="font-size: 14px; font-weight: bold;" @click="openModal" >{{props.studentName}}</p>
        <p>{{props.studentMajor+' '+props.studentClass}}</p>
    </div>
    <div class="invite" >
        <img src="/src/assets/images/student/add.svg" alt="Invite" />
        <p>邀请</p>
    </div>
    <div class="modal" :class="{ open: isOpenModal }">
            <div class="modal-content-container">
                <div class="modal-content">
                    <div class="modal-header">
                        <img src="/src/assets/images/student/close.svg" alt="Delete" @click="closeModal" />
                    </div>
                    <PersonalProfile :student-id="props.studentId" v-if="isOpenModal" />
                </div>
            </div>
        </div>
   </div>


</template>
<style scoped>
.student-card {
    display: grid;
    width: 300px;
    grid-template-columns: 74px auto 25%;
    border: solid 1px #707070;
}

.student-card > img {
    margin: 5px;
    grid-column: 1 / 2;
}

.student-card > .message {
    grid-column: 2 / 3;
    align-self: center;   
}

.student-card > .message > p {
    font-family: Source Han Sans CN;
	font-size: 12px;
	color: #707070;
    margin: 5px;
}

.student-card > .message > p:first-child {
    cursor: pointer;
}

.student-card > .message > p:first-child:hover {
    color: blue;
}

.student-card > .invite {
    grid-column: 3 / 4;
    display: flex;
    border-left: solid 1px #707070;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.student-card > .invite > p {
    font-family: Source Han Sans CN;
	font-size: 12px;
	color: #707070;
}

.student-card>.modal {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
    z-index: 20;
}

.student-card>.modal.open {
    display: block;
}

.student-card>.modal>.modal-content-container {
    display: flex;
    width: 100%;
    /* height: 100%;*/
    justify-content: center;
    align-items: center;
}


.student-card>.modal>.modal-content-container>.modal-content {
    width: 780px;
    /*height: 491px;*/
    background-color: #ffffff;
    border: none;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    padding: 20px 54px;
    margin: 50px 0;
}

.student-card>.modal>.modal-content-container>.modal-content>.modal-header {
    display: flex;
    justify-content: end;
    align-items: center;
}

.student-card>.modal>.modal-content-container>.modal-content>.modal-header>img {
    cursor: pointer;
    user-select: none;
    transition: transform 0.25s;
}

.student-card>.modal>.modal-content-container>.modal-content>.modal-header>img:hover {
    transform: rotate(90deg);
}

</style>